<template>
	<div class="">
		<div class="goBackButtonBox">
			<div @click="handleClosed" class="item cursor-pointer el-icon-arrow-left font24"></div>
		</div>
		<div  style="margin-top: 40px;width: 100%;"></div>
		<div class="" v-if="storeUserinfo.isAdmin==1">
			<div class="">
				<textarea name="selfContent" id="" cols="50" rows="10" v-model="updataDetail"></textarea>
			</div>
			<el-button @click="handledUpdata">修改</el-button>
			<div class="font14" style="border-bottom: 1px solid #ccc;"> 预览</div>
			<div class="marginB15" v-html="updataDetail"></div>
			<div style="margin-bottom: 40px;border-top: 1px solid #ccc;"></div>
		</div>
		<div class="">
			<h1>SHS-IM</h1>
			<div class="" v-html="detail"></div>
			<div class="bottonBox">
				<bottom-content-vue></bottom-content-vue>
			</div>
		</div>

		
	</div>
</template>

<script>
	import BottomContentVue from "@/components/BottomContent.vue"
	import {
		getInfo,
		updateInfo
	} from "@/api/dict";
	import {
		debounce
	} from "@/utils/common.js";
	export default {
		components: {
			BottomContentVue,
		},
		data() {
			return {
				detail: ``,
				updataDetail: ``,
				code: "pageSlefDetail",
				defaultValue: `<div class="">校园交流站</div><div class="">管理员：[2192555809@qq.com]</div>`
			}
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo;
			},
		},
		mounted() {
			getInfo({
				code: this.code
			}).then(res => {
				this.detail = res.data[0].value
				this.updataDetail = this.detail
			})
		},
		methods: {
			//修改
			handledUpdata: debounce(function() {
				if (!this.updataDetail) {
					this.updataDetail = this.defaultValue
				}
				updateInfo({
					code: this.code,
					value: this.updataDetail
				}).then(res => {
					this.detail = this.updataDetail
					this.$message({
						message: "修改成功",
						type: "success",
						duration: 700
					})
				})
			}),
			//关闭
			handleClosed() {
				this.$router.push({
					name: "home",
					params: {
						code: "wode"
					}
				})
			},
		}
	}
</script>

<style >
	.bottonBox {
		width: 90vw;
		height: 50px;
		position: relative;
		
	}
</style>